import React, { useState } from 'react'
import store from '../../redux/store'
import { deleteUserinfo } from '../../redux/actions/login'
import { withRouter } from 'react-router-dom';
import { Layout, Dropdown, Menu, Avatar } from 'antd'
import { MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined } from '@ant-design/icons';
import style from './header.module.css'
const { Header } = Layout
const menu = (item, props) => (
  <Menu>
    <Menu.Item key={1}>
      <span>{item?.role.roleName}</span>
    </Menu.Item>
    <Menu.Item key={2} danger onClick={() => exit(props)}>
      退出
    </Menu.Item>

  </Menu>
);

const exit = (props) => {
  sessionStorage.removeItem("token")
  sessionStorage.removeItem("userInfo")
  store.dispatch(deleteUserinfo([]))
  props.history.replace('/login')
}

function TopHeader (props) {

  const [collapsed, setCollapsed] = useState(false)
  // 从redux中获取用户的信息
  const [userInfo] = useState(store.getState().userInfo[0])

  const toggle = () => {
    setCollapsed(!collapsed)
  }
  return (
    <Header className="site-layout-background" style={{ padding: '0 16px' }}>
      {
        collapsed ? <MenuUnfoldOutlined onClick={toggle} /> : <MenuFoldOutlined onClick={toggle} />
      }
      <div className={style.info}>
        <span>{userInfo?.username}</span>
        <Dropdown overlay={menu(userInfo, props)} placement="bottomRight" arrow>
          <Avatar style={{ backgroundColor: '#87d068', marginLeft: "15px", cursor: 'pointer' }} size={{
            xs: 24,
            sm: 32,
            md: 40,
          }} icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>
  )
}

export default withRouter(TopHeader)